<template>
	<div class="update-name">
		<!-- 导航栏 -->
		<van-nav-bar
			title="设置昵称"
			left-text="取消"
			right-text="完成"
			@click-left="$emit('close')"
			@click-right="onConfirm"
		/>
		<!-- /导航栏 -->
		<!-- 输入框 -->
		<div class="field-wrap">
			<van-field
				v-model.trim="message"
				rows="2"
				autosize
				type="textarea"
				maxlength="7"
				placeholder="请输入昵称"
				show-word-limit
			/>
		</div>
		<!-- /输入框 -->
	</div>
</template>

<script>
import { updateUserProfile } from '@/api/user'
export default {
	name: 'UpdateName',
	components: {},
	props: {
		value: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			message: this.value,
		}
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		async onConfirm() {
       this.$toast.loading({
        message: '保存中...',
        forbidClick: true, // 禁止背景点击
        duration: 0 // 持续展示
    })
			try {
				const message = this.message
				// 判断是否为空
				if (!message.length) {
					this.$toast('昵称不能为空')
					return
				}
				await updateUserProfile({
					name: message,
				})
				// 更新视图
				this.$emit('input', message)
				// 关闭弹层
				this.$emit('close')
				// 提示成功
				this.$toast.success('更新成功')
			} catch (err) {
				console.log(err)
				this.$toast.fail('操作失败，请重试')
			}
		},
	},
}
</script>

<style scoped lang="less">
.field-wrap {
	padding: 20px;
}
</style>
